<template>
  <div class="main-qiniu">
    <div class="upload-container">
      <el-upload
        class="avatar-uploader"
        action="http://upload-z2.qiniu.com/"
        bucket="auto123"
        :data="qiniuData"
        accept=".jpg,.jpeg,.png,.mp4,.PNG"
        :show-file-list="false"
        :on-success="handleSuccess"
        :on-progress="uploadVideoProcess"
        :before-upload="beforeUpload"
      >
        <!--          <video v-if="imgUrl !== '' && !videoFlag && isVideo"-->
        <!--                 v-bind:src="imgUrl"-->
        <!--                 class="avatar video-main"-->
        <!--                 controls="controls">-->
        <!--            您的浏览器不支持视频播放-->
        <!--          </video>-->
        <!--          <img v-if="!!imgUrl && !isVideo" :src="imgUrl">-->
        <el-button size="medium" v-if="!videoFlag" v-loading="loading" round type="primary">
          {{buttonText}}<i class="el-icon-upload el-icon--right"></i>
        </el-button>
        <el-progress v-if="videoFlag"
                     type="circle"
                     v-bind:percentage="videoUploadPercent"
                     style="margin-top:7px;"></el-progress>
        <!-- 展示上传成功后的图片-->
      </el-upload>
    </div>
  </div>
</template>

<script>
  //  获取token的api
  import {getToken} from '@/api/common.js'
  const qiniu_prefix = 'video/'
  export default {
    name: 'QiniuUpload',
    props: {
      buttonText: {
        type: String,
        default: '上传视频'
      },
      imgUrl: {
        type: String,
        default: ''
      },
      fileInfo: {
        type: Object,
        default: {}
      },
    },
    mounted() {
    },
    data() {
      return {
        loading: false,
        isVideo: false,
        //是否显示进度条
        videoUploadPercent: "",
        videoFlag: false,
        qiniuData: {
          domain: '',
          token: '',
          key: ''
        },
        result: {
          fileUrl: null,
          fileName: null,
          fileSize: null,
          fileType: null,
        }
      }
    },
    computed: {
      // url: {
      //   get() {
      //     return this.imgUrl
      //   },
      //   set(val) {
      //     this.$emit('update:imgUrl', val)
      //   }
      // }
    },
    methods: {
      handleSuccess(data) {
        if (data.key) {
          console.log('key', data.key)
          let names = data.key.split('/')
          if (names.length > 1) {
            let url = ''
            for (let i = 0; i < names.length - 1; i++) {
              url = url + names[i] + '/'
            }
            this.result.fileUrl = url + encodeURIComponent(names[names.length - 1], "utf-8");

          } else {
            this.result.fileUrl = url + encodeURIComponent(data.key)
          }
          console.log(this.result.fileUrl)
          this.result.fileUrl = 'http://' + this.qiniuData.domain + '/' + this.result.fileUrl
          this.$emit('update:imgUrl', this.result.fileUrl)
          this.$emit('update:fileInfo', this.result)
        }

        this.isShowUploadVideo = true;
        this.videoFlag = false;
        this.videoUploadPercent = 0;
        this.loading = false
      },
      //进度条
      uploadVideoProcess(event, file, fileList) {
        this.videoFlag = true;
        this.videoUploadPercent = file.percentage.toFixed(0) * 1;
      },
      beforeUpload(file) {
        // console.log(file)
        const uid = sessionStorage.getItem('w_uid')
        const name = (uid == null)?(qiniu_prefix + 'default/' + file.name):(qiniu_prefix + uid + '/' + file.name)
        const fileSize = file.size
        const maxSize100M = file.size / 1024 / 1024 < 100;
        if (!maxSize100M) {
          this.$message.error('上传文件大小不能超过 100MB!');
          return false
        }

        this.loading = true
        const fileType = file.type
        if (name.endsWith('mp4')) {
          this.isVideo = true
        } else {
          this.isVideo = false
        }
        const _self = this
        return new Promise((resolve, reject) => {
          getToken({
            fileName: name
          }).then(res => {
            if (res.code === 200) {
              _self.qiniuData.key = res.data.id
              _self.qiniuData.domain = res.data.name
              _self.qiniuData.token = res.data.value
              _self.qiniuData.filename = name

              _self.result.fileName = name
              _self.result.fileSize = fileSize
              _self.result.fileType = fileType
              console.log(_self.qiniuData)
              resolve(true)
            }  else {
              reject(false)
              this.loading = false
            }
          }).catch(err => {
            console.log(err)
            this.loading = false
            reject(false)
          })
        })
      }
    }
  }
</script>
<style scoped>
  .main-qiniu {
    width: 100%;
    text-align: center;
    display: inline-block;
  }
  .video-main{
    height: 400px;
    width: 600px;
  }
</style>
